import React, { Component } from 'react';
import { 
	// Image, 
	ScrollView, 
	StyleSheet, 
	Text, 
	Dimensions, 
	TouchableOpacity,
	Alert,
	StatusBar,
	View,
	ListView,
	RefreshControl,
	PixelRatio,
	TouchableHighlight
} from 'react-native';
import timeago from 'timeago.js';
import Image  from 'react-native-image-progress';
import Icon from 'react-native-vector-icons/FontAwesome';

import Header from '../../components/Header';
import NewsDetailContainer from '../../containers/NewsDetailContainer';

import LoadMoreFooter from '../../components/LoadMoreFooter';
import Loading from '../../components/Loading';

import Comment from './Comment';
import ImageDetail from './ImageDetail';
import {
	get_news_list,
	refresh_news_list,
} from '../../actions/newsActions';
import {
	scaleSize,
	setSpText
} from './util';

const  ONE_PIXEL = 1 / PixelRatio.get();
var timeagoInstance = timeago();
import NewsItemHeader from './NewsItemHeader';
import CustomImage from './CustomImage';

export default class NewsPage extends Component{
	constructor(props) {
	  super(props);
	
	  this.state = {

	  };
	  this.ds=new ListView.DataSource({
	  	rowHasChanged:(r1,r2)=>r1!==r2
	  });

	}
	componentDidMount(){
		this.fetchData();
	}
	fetchData(){
		let {dispatch,newsReducer} = this.props;
		if(newsReducer.isMore){
			dispatch(get_news_list());
		}
	}
	renderContent(row,isSpread=false){
		var isGt200=false;
		var text=row.post_text;

		if(text.length>200 && isSpread==false){
			text=text.substr(0,200)+'...'
			isGt200=true;
		}
		// console.log(isGt200);
		// console.log(text.length);
		return <Text>{text}{isGt200 ?<Text style={{color:"#2a90d7"}} onPress={()=>this.jumpDetail(row)}>全部</Text>:null}</Text>
	}
	renderImgs(post_imgs=[]){
		var imgs=[];
		// console.log(this.jumpImageDetail)
		if(post_imgs.length>=3){
			imgs = post_imgs.map((item,index)=>{
					// console.log(item);
				return (
				<TouchableOpacity  
							onPress={()=>this.jumpImageDetail(post_imgs,index)} 
							style={{flexDirection:'row',margin:scaleSize(4)}} key={index}>
					<Image  source={{uri:item.url}} style={{width:scaleSize(320),height:scaleSize(320)}} />
				</TouchableOpacity>
				)
			})
			
		}else if(post_imgs.length==2){
			imgs = post_imgs.map((item,index)=>{
					console.log(item);
				return (
				<TouchableOpacity  
							onPress={()=>this.jumpImageDetail(post_imgs,index)} 
							style={{flexDirection:'row',margin:scaleSize(4),flex:1,height:scaleSize(320)}} key={index}>
					<Image  source={{uri:item.url}} style={{flex:1}} />
				</TouchableOpacity>
				)
			})			
		}else if(post_imgs.length==1){
			imgs = post_imgs.map((item,index)=>{
					console.log(item);
				return (
				<TouchableOpacity  
							onPress={()=>this.jumpImageDetail(post_imgs,index)} 
							style={{flexDirection:'row',margin:scaleSize(4),flex:1}} key={index}>
					<CustomImage url={item.url}  source={{uri:item.url}} style={{flex:1}} />
				</TouchableOpacity>
				)
			})	
			// var div = <View style={{flex:1}} />
			// imgs.push(div);			
		}
		return imgs;
		
	}
	jumpImageDetail(imgs,index){
		// console.log("jumpImageDetail");
		this.props.navigator.push({
			component:ImageDetail,
			passProps:{
			    imgs:imgs,
			    imgIndex:index,
			}		
		})		
	}
	jumpDetail(row){
		this.props.navigator.push({
			component:NewsDetailContainer,
			passProps:{
			    ...row
			}		
		})
	}
	renderRow(row){
		// console.log(row);
		return (
				<View style={styles.listViewItem}>
					<NewsItemHeader 
						logo={row.logo} 
						post_time={row.post_time}
						post_tag={row.post_tag}
						nickname={row.nickname}
					/>
					<View style={styles.rowItemContent}>
						<Text  onPress={()=>this.jumpDetail(row)}>
							{this.renderContent(row)}
						</Text>
						<View style={styles.imgList}>
							{this.renderImgs(row.post_imgs)}
						</View>
						<Text style={{color:'#9e9e9e',fontSize:12}}>{row.read_count}人阅读  {row.zan_count}赞  {row.remark_count}评论</Text>
					</View>
					<View style={styles.rowItemFoot}>
						<TouchableOpacity style={styles.footItem}>
							<Icon size={25}  name="thumbs-o-up"/>
							<Text style={{marginLeft:10}}>赞</Text>
						</TouchableOpacity>
						<TouchableOpacity style={styles.footItem} onPress={()=>this.jumpDetail(row)}>
							<Icon size={25}  name="pencil"/>
							<Text style={{marginLeft:10}}>写评论</Text>
						</TouchableOpacity>						
					</View>
					<View style={styles.commentList}>
						{
							row.remarks.map((remark,index)=>{
								if(index<=2){
									return <Comment  remark={remark} key={index} />
								}
							})
						}
						{
							row.remarks.length>3
							?(<TouchableOpacity activeOpacity={0.8} onPress={()=>this.jumpDetail(row)} style={{alignItems:'center',justifyContent:'center'}}>
								<Image 
								source={require("../../images/zhcs/load_more.png")} 
								style={{width:110,height:30}} 
								/>
							</TouchableOpacity>)
							:null
						}
					</View>
				</View>
			);
		//<Text>查看更多评论</Text>
	}
	onFooterRefresh(newsReducer){
		console.log("onFooterRefresh")
		/*var {dispatch} = this.props;
		console.log(newsReducer.isFetchingMore,'-------');
		dispatch(get_news_list());*/
		this.fetchData();
		/*if(!newsReducer.isFetchingMore){
		}*/
	}
	renderFooter(newsReducer){
		console.log("renderFooter");
		if(!newsReducer.isMore){
			return (
					<View style={{alignItems:'center'}}>
						<Text>没有更多了</Text>
					</View>
				)
		}
		if(newsReducer.isFetchingMore){
			return <LoadMoreFooter/>
		}
		return <Text></Text>
		
	}
	onRefresh(){
		// console.log("onRefresh")
		var {dispatch} = this.props;
		dispatch(refresh_news_list());
	}
	render(){
		let {title,newsReducer} = this.props;
		// console.log(newsReducer);
		// console.log(this.props,'333');
		// return <Loading/>
		return (
				<View style={styles.container}>
					<Header title={title}></Header>

					<View style={styles.toolbar}>
						<View style={[styles.toolbarItem]}>
							<Image  source={require("../../images/zhcs/write.png")} style={{width:20,height:20}}/>
							<Text style={styles.toolbarText}>文字</Text>
						</View> 
						<View style={[styles.toolbarItem,{borderLeftWidth:ONE_PIXEL,borderLeftColor:'#ccc'}]}>
							<Image  source={require("../../images/zhcs/pos_pic.png")} style={{width:20,height:20}}/>
							<Text style={styles.toolbarText}>图片</Text>
						</View>		
						<View style={[styles.toolbarItem,{borderLeftWidth:ONE_PIXEL,borderLeftColor:'#ccc'}]}>
							<Image  source={require("../../images/zhcs/video.png")} style={{width:20,height:20}}/>
							<Text style={styles.toolbarText}>视频</Text>
						</View>											
					</View>
					{
						!newsReducer.isFirstLoaded
						?<Loading/>
						:<ListView 
							ref={(e)=>this.listView=e}
							style={styles.listView}
							dataSource={this.ds.cloneWithRows(newsReducer.news)}
							renderRow={this.renderRow.bind(this)}
							enableEmptySections
							refreshControl={
							    <RefreshControl
							        refreshing={newsReducer.refreshing}
							        onRefresh={() => this.onRefresh(newsReducer)}
							        tintColor='gray'
							    />
							}	
							renderFooter={() => this.renderFooter(newsReducer)}					
							onEndReachedThreshold={20}
							onEndReached={() => this.onFooterRefresh(newsReducer)}				
						/>					
					}
					
				</View>
			);
	}
}



const styles=StyleSheet.create({
	container:{
		flex:1,
		backgroundColor:'#fff'
	},
	toolbar:{
		flexDirection:'row',
		height:30,		
	},
	toolbarItem:{
		flexDirection:'row',
		flex:1,
		justifyContent:'center',
		alignItems:"center",
		marginTop:6,
		marginBottom:6
	},
	toolbarText:{
		marginLeft:10,
		fontSize:13,
		fontWeight:'bold'
	},
	listView:{
		backgroundColor:"#f4f5f6",
	},
	listViewItem:{
		backgroundColor:'#fff',
		marginTop:8
	},
	
	rowItemContent:{
		paddingHorizontal:12,
		paddingVertical:13,
		paddingTop:0,
	},
	rowItemFoot:{
		height:50,
		flexDirection:'row',
		borderTopWidth:1,
		borderTopColor:"#f4f5f6",
		borderBottomWidth:1,
		borderBottomColor:"#f4f5f6"
	},
	footItem:{
		flex:1,
		justifyContent:'center',
		alignItems:'center',
		flexDirection:'row'
	},
	imgList:{
		flex:1,
		marginTop:10,
		marginBottom:10,
		flexDirection:"row",
		flexWrap:"wrap",
	},
	imgListItem:{
		width:165,
		height:165,		
	}
})